<template>
  <div>
    <div>
      <a href="#/shou">首页</a>
      <a href="#/fen">分类</a>
      <a href="#/ding">订单</a>
      <a href="#/wo">我的</a>
      <router-link to="shou"></router-link>
    </div>
    <hr />
    <div style="border: 1px solid red">
      <P>切换页面</P>
      <hr />
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Shou from "./views/Shou.vue";
import Fen from "./views/Fen.vue";
import Ding from "./views/Ding.vue";
import Wo from "./views/Wo.vue";
export default {
  data() {
    return {
      comName: "Shou",
    };
  },
  mounted() {
    window.onhashchange = () => {
      switch (location.hash) {
        case "#/shou":
          this.comName = "Shou";
          break;
        case "#/fen":
          this.comName = "Fen";
          break;
        case "#/ding":
          this.comName = "Ding";
          break;
        case "#/wo":
          this.comName = "Wo";
          break;
      }
    };
  },
  components: {
    Shou,
    Fen,
    Ding,
    Wo,
  },
};
</script>

<style scoped>
a {
  margin: 0 10px;
}
</style>